<template>
  <div style="width: 100%" v-if="visible">
    <el-form ref="form" :model="form" :rules="rules" label-position="top" size="mini">
      <el-row>
        <el-col :span="24">
          <el-form-item label="构建机器" prop="machineId">
            <el-select v-model="form.machineId" placeholder="请选择机器" clearable :style="{width: '100%'}">
              <el-option v-for="(item, index) in machineList" :key="index" :label="item.label" :value="item.value"
                         :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="JDK版本" prop="jdk">
            <el-select v-model="form.jdk" placeholder="请选择JDK版本" clearable :style="{width: '100%'}">
              <el-option v-for="(item, index) in JDKVersions" :key="index" :label="item.label" :value="item.value"
                         :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="Maven版本" prop="mvn">
            <el-select v-model="form.mvn" placeholder="请选择Maven版本" clearable :style="{width: '100%'}">
              <el-option v-for="(item, index) in mavenVersions" :key="index" :label="item.label" :value="item.value"
                         :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="构建命令" prop="buildScript">
            <div style="width: 100%;overflow-x: scroll">
              <AceEditor
                v-model="form.buildScript"
                width="955px"
                height="150px"
                :fontSize="14"
                :showPrintMargin="true"
                :showGutter="true"
                :highlightActiveLine="true"
                mode="sh"
                theme="monokai"
                :onChange="onChange"
                name="editor"
                :editorProps="{$blockScrolling: true}"
                :wrapEnabled="true"
              />
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button size="mini" style="width: 100%" type="primary" @click="submitForm">保 存</el-button>
    </div>
  </div>
</template>

<script>
// see https://www.npmjs.com/package/vue2-brace-editor
import {Ace as AceEditor} from 'vue2-brace-editor';
import {nodeInfo, updateInfo, addNodeInfo} from '@/lib/api-pipeline';

import 'brace/mode/sh';
import 'brace/theme/monokai';

import Vue from 'vue'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(Element)

export default {
  name: "java-build",
  components: {
    AceEditor
  },
  data() {
    return {
      id:0,
      visible: false,
      nodeUuid: '',
      initBuildScript: '# maven build default command\nmvn -B clean package -Dmaven.test.skip=true -Dautoconfig.skip\n# gradle build default command\n# ./gradlew build\n\n# ant build default command\n# ant \n',
      form: {
        buildScript: this.initBuildScript
      },
      radio: 1,
      machineList: [],
      JDKVersions: [
        {value: 'JDK 1.7', label: 'JDK 1.7'},
        {value: 'JDK 1.8', label: 'JDK 1.8'},
        {value: 'JDK 1.9', label: 'JDK 1.9'},
        {value: 'OPENJDK 10', label: 'OPENJDK 10'},
        {value: 'OPENJDK 11', label: 'OPENJDK 11'},
        {value: 'JDK 17', label: 'JDK 17'},
      ],
      mavenVersions: [
        {value: 'MAVEN 3.6', label: 'MAVEN 3.6'},
        {value: 'MAVEN 3.7', label: 'MAVEN 3.7'},
      ],
      noticeWays: [
        {value: 'DING_DING', label: '钉钉'},
        {value: 'EMAIL', label: '邮件'},
      ],
      rules: {
        machineId: [{required: true, message: '机器不能为空', trigger: 'blur'}],
        jdk: [{required: true, message: 'jdk版本不能为空', trigger: 'blur'}],
        mvn: [{required: true, message: 'maven版本不能为空', trigger: 'blur'}],
        buildScript: [{required: true, message: '构建命令不能为空', trigger: 'blur'}],
      }
    }
  },
  methods: {
    init(nodeUuid) {
      //组件数据初始化，防止出现使用同一个组件的两个节点之间数据关联
      Object.assign(this.$data, this.$options.data())
      this.form = {
        buildScript: this.initBuildScript
      }
      this.nodeUuid = nodeUuid
      nodeInfo({'nodeUuid': nodeUuid}).then(response => {
        if (response.code === 200) {
          const data = response.data
          if (data) {
            this.form = JSON.parse(data.info)
            this.id = data.id
          }
        } else {
          this.msgError(response.msg)
        }
        this.visible = true
      })
      this.getMachineList()
    },
    //获取当前节点的配置文件（改之前的每个配置节点提交为统一流水线一起提交到后台）
    getNodeConfig(){
        return this.form
    },
    getMachineList() {
      this.$api.getMachineList({
        page: 1,
        limit: 100
      }).then(({ data }) => {
        this.machineList = data.value.map(item => {
          return {
            value: item.id,
            label: item.name
          }
        })
      }).catch(() => {
        console.log('err')
      })
    },
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          // 构建数据json
          let info = {
            'id':this.id,
            'nodeUuid': this.nodeUuid,
            'nodeName': 'Java 构建',
            'info': JSON.stringify(this.form)
          }
          if (this.id !== 0) {
            updateInfo({'pipelineNodeInfoDTO': info}).then(response => {
              if (response.code === 200) {
                this.msgSuccess('修改成功')
              } else {
                this.msgError(response.msg)
              }
            })
          } else {
            addNodeInfo({'pipelineNodeInfoDTO': info}).then(response => {
              if (response.code === 200) {
                this.id = response.data //更新新增节点id
                this.msgSuccess('新增成功')
              } else {
                this.msgError(response.msg)
              }
            })
          }
        }
      })
    },
    onChange(data){
      this.form.buildScript = data
    }
  }
}
</script>

<style scoped>

</style>
